<template>
  <div class="container">
    <div class="actionBtn" v-if="counter.isShowActionBtn(props.info)">
      <!-- <el-button type="info" plain>已选 {{selectArr.length}} 条</el-button> -->
      <el-button type="primary" @click="handleClick(1)">新增排课</el-button>
      <!-- <el-button @click="handleClick(2)" :disabled="!selectArr.length">批量修改</el-button> -->
      <el-button type="danger" plain @click="handleClick(3)" :disabled="!selectArr.length">删除排课</el-button>
      <!-- <el-button @click="handleClick(4)">导出排课</el-button> -->
    </div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="date" label="排课节数" width="80">
        <template #default="scope">
          第{{scope.$index+1}}节
        </template>
      </el-table-column>
      <el-table-column prop="date" label="排课日期" width="170">
        <template #default="scope">
          {{scope.row.date}}（{{getWeekday(scope.row.date)}}）
        </template>
      </el-table-column>
      <el-table-column prop="address" label="上课时间" width="150">
        <template #default="scope">
          {{scope.row.classStartTime}} - {{scope.row.classEndTime}}
        </template>
      </el-table-column>
      <el-table-column prop="unitClassHours" label="课时" width="80" />
      <el-table-column prop="classAddress" label="授课地点" width="200" show-overflow-tooltip />
      <el-table-column prop="teachingTeacher" label="授课老师" width="120">
        <template #default="scope">
          {{ scope.row.teachingTeacher?scope.row.teachingTeacher:props.info.teachingTeacher}}
        </template>
      </el-table-column>
      <el-table-column prop="teachingContent" label="授课内容" show-overflow-tooltip />
      <el-table-column prop="classTeacher" label="班级老师" width="100" />
      <el-table-column prop="classTeacher" label="班级老师" width="100">
        <template #default="scope">
          <div class="button" @click="fileOpen(scope.row,1)" v-if="scope.row.checkPictureUrl">签到下载</div>
          <div class="button" @click="fileOpen(scope.row,2)" v-else>上传签到</div>
        </template>
      </el-table-column>
    </el-table>

    <updateClass ref="updateClassRef" @fatherMethod="getInfo"></updateClass>
    <FileUploader v-model="params.checkPictureUrl" ref="fileUploaderRef" @fatherMethods="saveUrl"></FileUploader>
  </div>
</template>

<script setup lang="ts">
import updateClass from "@/views/courseManage/components/updateClassToC.vue";
const { proxy } = getCurrentInstance();
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let props = defineProps(["info"]);
let tableData = ref([]);
let selectArr = ref([]);
let params = ref({
  checkPictureUrl: "",
  _id: "",
});

function fileOpen(row, num) {
  if (num == 1) {
    window.location.href = row.checkPictureUrl;
  } else {
    params.value._id = row._id;
    params.value.checkPictureUrl = "";
    proxy.$refs.fileUploaderRef.open();
  }
}

async function saveUrl(e) {
  if (!e) return;
  await proxy.$apis.teachingScheduleDataToC({
    type: "update",
    data: params.value,
  });
  proxy.$utils.showToast("上传成功");
  getInfo();
}

async function getInfo() {
  if (!props.info._id) return;
  tableData.value = await proxy.$apis.teachingScheduleDataToC({
    type: "query",
    data: { classId: props.info._id },
  });
  console.log("排期", tableData.value);
}

function getWeekday(date) {
  const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const weekday = new Date(date).getDay();
  return weekdays[weekday];
}

function handleSelectionChange(val) {
  let arr = [];
  val.forEach((element) => {
    arr.push(element._id);
  });
  selectArr.value = arr;
}

async function handleClick(num) {
  switch (num) {
    case 1:
      let newValue = proxy.$utils.deepcopy(props.info);
      delete newValue.unitClassHours;
      delete newValue.classDates;
      delete newValue.classStartTime;
      delete newValue.classEndTime;
      delete newValue.classAddress;
      delete newValue.teachingTeacher;
      proxy.$refs.updateClassRef.open(newValue, "disabledClassInfo");
      break;
    case 2:
      proxy.$refs.teachingScheduleBatchActionRef.open(selectArr.value);
      break;
    case 3: //删除排课
      let resp = await proxy.$utils.confirmTips("确认删除选中的排课数据?");
      if (!resp) return;
      for (let index = 0; index < selectArr.value.length; index++) {
        const element = selectArr.value[index];
        await proxy.$apis.teachingScheduleDataToC({
          type: "del",
          data: { _id: element },
        });
      }
      proxy.$utils.showToast("删除成功");
      getInfo();
      break;
    case 4:
      console.log("导出排课", teachingSchedule.value);
      let list = [];

      teachingSchedule.value.forEach((element, index) => {
        list.push({
          排课节数: `第${index + 1}节`,
          //关联课程: element.curriculumId,
          排课日期: element.date,
          上课时间: element.classStartTime + " - " + element.classEndTime,
          课时: element.unitClassHours,
          授课地点: element.classAddress,
          授课老师: element.teachingTeacher
            ? element.teachingTeacher
            : props.info.teachingTeacher,
          授课内容: element.teachingContent,
          //班级老师: element.classTeacherId,
        });
      });
      let cols = []; //设置表头样式
      list.forEach((element) => {
        cols.push({ wch: 20 });
      });
      let query = {
        jsonData: list,
        cols,
      };
      await proxy.$utils.exportToExcel(query, "排课信息");
      break;
    default:
      break;
  }
}

watch(
  () => props.info,
  (newValue, oldValue) => {
    if (newValue) getInfo();
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.actionBtn {
  margin-bottom: 10px;
}
</style>
